<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="path"
      :indent="20"
      :columns="columns"
      :init-param="initParam"
      :data-callback="dataCallback"
      :request-api="getTableList"
      :toolButton="['refresh', 'setting', 'search']"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="operateClick('add', {})">新增菜单</el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="operateClick('view', scope.row)"> 查看 </el-button>
        <el-button type="primary" link :icon="EditPen" @click="operateClick('edit', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete" @click="operateClick('delete', scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <UserDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { reactive, ref } from "vue";
import { View, Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

import { ColumnProps } from "@/components/ProTable/interface";

import { getAuthMenuListApi } from "@/api/modules/auth";
import { getMongoTrees, initRouter, flatMenu } from "@/utils/filterRoute";

import ProTable from "@/components/ProTable/index.vue";
import UserDrawer from "@/views/system/menuMange/components/MenuDrawer.vue";

const proTable = ref();

const initParam = reactive({ type: 1 });

const dataCallback = (data: any) => {
  const list = initRouter(getMongoTrees(data.menus));
  return {
    list: list,
    total: list.length
  };
};

const getTableList = async (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getAuthMenuListApi();
};

// 表格配置项
const columns: ColumnProps[] = [
  { type: "selection", fixed: "left", width: 70 },
  // { type: "sort", label: "Sort", width: 80 },
  { prop: "meta.title", label: "菜单名称", width: 150, align: "left", search: { el: "input", tooltip: "请输入菜单名称" } },
  { prop: "meta.icon", label: "菜单图标", width: 90 },
  { prop: "name", label: "组件名称", width: 200, search: { el: "input" } },
  { prop: "path", label: "路由路径", width: 300 },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
  // {
  //   prop: "createTime",
  //   label: "创建时间",
  //   width: 180,
  //   search: {
  //     el: "date-picker",
  //     span: 2,
  //     props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
  //     defaultValue: ["", ""]
  //   }
  // }
];

// 操作
const actionHandlers = {
  add: row => {
    // console.log("新增");
    openDrawer("新增", {
      isKeepAlive: 1
    });
  },
  edit: row => {
    console.log("编辑", row);
    let rows = flatMenu(JSON.parse(JSON.stringify(row)));
    openDrawer("编辑", rows);
  },
  delete: row => {
    console.log("删除", row);
    ElMessageBox.confirm("是否删除这一项?", "删除", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        ElMessage({
          type: "success",
          grouping: true,
          message: "删除成功"
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          grouping: true,
          message: "取消删除"
        });
      });
  },
  view: row => {
    let rows = flatMenu(JSON.parse(JSON.stringify(row)));
    openDrawer("查看", rows);
  }
};

const operateClick = (type: string, row: object) => {
  const actionHandler = actionHandlers[type];
  if (actionHandler) {
    actionHandler(row);
  }
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof UserDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<any> = {}) => {
  const params = {
    title,
    row: { ...row },
    isView: title === "查看",
    api: undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>

<style lang="scss" scoped></style>
